<template>
  <div>
    <el-card shadow="never" class="d2-mb">
      <el-form
        class="filter-container"
        ref="futuresForm"
        :model="futuresForm"
        label-width="85px"
      >
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="交易所">
               <el-select  clearable v-model="futuresForm.exchangeid" placeholder="请选择" filterable allow-create @change="handle_productid">
			            <el-option label="中国金融交易所" value="CFFEX"></el-option>
                  <el-option label="郑州商品交易所" value="CZCE"></el-option>
                  <el-option label="大连商品交易所" value="DCE"></el-option>
                  <el-option label="上海国际能源交易中心" value="INE"></el-option>
                  <el-option label="上海期货交易所" value="SHFE"></el-option>
			        </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="品种">
              <el-select
                v-model="futuresForm.productid"
                placeholder="请选择"
                style="width:100%;" @change="handle_instrument"
              >
                <el-option
                  v-for="item in productidList"
                  :key="item.productid"
                  :label="item.ProductName"
                  :value="item.productid"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="合约">
              <el-select  clearable v-model="futuresForm.instrumentid" value-key="instrumentid" placeholder="请选择" style="width:100%;" @change="changeIns">
                <el-option
                  v-for="item in instrumentidList"
                  :key="item.instrumentid"
                  :label="item.InstrumentName"
                  :value="item.instrumentid"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
           <el-col :span="2">
          <el-button type="primary" size="small" style='margin-top:3px;' @click="handle_futures">
            <d2-icon name="search" /> 查询
          </el-button>
        </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div class="mb">
      <!-- <el-button type="default" size="small" @click="handleFormSubmit">
        <d2-icon name="download" />
        导入
      </el-button> -->
      <el-button type="default" size="small" @click="handleFormSubmit">
        <d2-icon name="upload" />
        导出
      </el-button>
      <el-button
        type="default"
        size="small"
        @click="RefreshCurrent"
      >
        <d2-icon name="refresh" />
        刷新
      </el-button>
    </div>
    <el-card shadow="never" class="d2-mb">
      <el-table
        :data="futurestableData"
        border
        highlight-current-row
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="40"> </el-table-column>
        <el-table-column type="index" label="序号">
        </el-table-column>
        <el-table-column
          prop="ExchangeID"
          label="交易所ID"
          sortable
        ></el-table-column>
         <el-table-column
          prop="ExchangeName"
          label="交易所名称"
          sortable
        ></el-table-column>
        <el-table-column
          prop="ProductName"
          label="品种"
          sortable
        ></el-table-column>
        <el-table-column
          prop="InstrumentID"
          label="合约代码"
          sortable
        ></el-table-column>
         <!-- <el-table-column
          prop="PriceUnit"
          label="单位"
          sortable
        ></el-table-column> -->
        <el-table-column
          prop="VolumeMultiple"
          label="合约乘数"
          sortable
        ></el-table-column>
        <el-table-column
          prop="PriceTick"
          label="最小变动价位"
          sortable
        ></el-table-column>
        <el-table-column
          prop="DeliveryMonth"
          label="合约交割月份"
          sortable
        ></el-table-column>
        <el-table-column
          prop="ExpireDate"
          label="最后交易日"
          sortable
        ></el-table-column>
        <el-table-column
          prop="EndDelivDate"
          label="最后交割日"
          sortable
        ></el-table-column>
      </el-table>
    </el-card>
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="futuresForm.page"
      :page-size="futuresForm.pageSize"
      layout="total, prev, pager, next"
      :total="futuresForm.totalPage"
    >
    </el-pagination>
  </div>
</template>

<script>
import { coninstrumentinfo, coninstrumentid, conCommodity } from '../../../../../api/url_lcc';
export default {
  //衍生品信息-期货信息
  name: "futuresInformation",
  data() {
    return {
      futurestableData:[],
      instrumentidList:[],
      futuresForm: {
        page: 1, //当前页
        pageSize: 20,
        totalPage: 0,
        productid:"",
        exchangeid:"",
        productclass:"1",
        instrumentid:[]
      },
      productidList:[],
      exchangeidList:[],
      productclassList:[],
      futurestableData:[],
      // instrumentid:[],
    };
  },
  methods: {
    // changeIns(val) {
    //   this.instrumentid = val;
    // },
     // 行内编辑
    handleCellDataChange({ rowIndex, key, value, row }) {
      debbuger;
      console.log(rowIndex);
      console.log(key);
      console.log(value);
      console.log(row);
    },
    // 单选
    handleCurrentChange(currentRow, oldCurrentRow) {
      console.log(currentRow);
      console.log(oldCurrentRow);
    },
    // 多选
    handleSelectionChange(selection) {
      console.log(selection);
    },
     // 获取表格选中时的数据
      selectRow(val) {
        this.selectlistRow = val
      },
      // 增加行
      addRow() {
       	  var list = {
          rowNum:this.rowNum,
          name:"",                             
          full_name:"",
          e_name:"",
          h_name:"",
          p_name:"",
          enterprise_prop:"", 
          enterprise_type:"",
          status:"",
          black:"",
          type:"",	
          trade_product:"",
          currency:"",
          certificate:"", 
          certificate_no:"",
          certificate_start:"",
          certificate_end:"",
          province:"",
          address:"",
          invoice_no:"",
          bank:"",
          bank_account:"",
          contact:"",
          contact_cell:"",
          contact_pos:""
   		 };
        this.addcustomertableData.unshift(list)
        this.rowNum += 1;
      },
      // 删除方法
      // 删除选中行
      delData () {
        for (let i = 0; i < this.selectlistRow.length; i++) {
          let val = this.selectlistRow
          val.forEach((val, index) => {
            this.addcustomertableData.forEach((v, i) => {
              if (val.rowNum === v.rowNum) {
                // i 为选中的索引
                this.addcustomertableData.splice(i, 1)
              }
            })
          })
        }
        // 删除完数据之后清除勾选框
        this.$refs.table.clearSelection()
      },
      // 查询品种
      handle_productid(){
        let params = {
            exchangeid: this.futuresForm.exchangeid,
            productclass: "1",
        };
        coninstrumentid(params).then(res => {
            // if (res.errcode == "1") {
              this.productidList = []
              var data1 = res.result
              for (var i = 0; i < data1.length; i++) {
                      this.productidList[i] = {
                          productid: data1[i]['ProductID'],
                          ProductName: data1[i]['ProductName']
                      };
                  }
            }).catch(err =>{
          this.$message.error(err.msg);
        });
      },
      // 查询合约
      handle_instrument(){
       let params = {
            productid: this.futuresForm.productid,
            // productclass: "1",
        };
        coninstrumentid(params).then(res => {
            // if (res.errcode == "1") {
              this.instrumentidList = []
              var data1 = res.result
              for (var i = 0; i < data1.length; i++) {
                      this.instrumentidList[i] = {
                          instrumentid: data1[i]['InstrumentID'],
                          InstrumentName: data1[i]['InstrumentName']
                      };
                  }
             }).catch(err =>{
          this.$message.error(err.msg);
        });
    },
     // 每页数
    handleSizeChange(val) {
      this.futuresForm.pageSize = val;
      this.futuresForm.page = 1;
     this.handle_futures();
    },
    // 当前页
    handleCurrentChange(val) {
      console.log(val);
      this.futuresForm.page = val;
      this.handle_futures();
    },
      // 查询
      handle_futures(){
      //  this.changeIns()
        coninstrumentinfo(this.futuresForm).then(res => {
              this.futurestableData = []
              this.futurestableData = res.result.results
              this.futuresForm.totalPage = res.result.count;
            }).catch(err =>{
          this.$message.error(err.msg);
        });
    },
       // 刷新
      RefreshCurrent(){
        // this.futuresForm.productid = "",
        // this.futuresForm.exchangeid = "",
        // this.futuresForm.instrumentid = "",
        this.handle_futures();
      },
  },
   mounted() {
    //  this.handle_futures();
  }
};
</script>
<style></style>
